// 定义一个Settings类，用于处理应用程序的设置
class Settings {
    // 构造函数，接收一个root对象作为参数
    constructor(root) {
        // 保存传入的root对象到实例变量中
        this.root = root;
        // 初始化平台变量为"WEB"
        this.platform = "WEB";
        // 检查root对象是否有AcOS属性，如果有，则平台为"ACAPP"
        if (this.root.AcOS) this.platform = "ACAPP";

        // 初始化用户名和照片变量为空字符串
        // 这些变量后续可能会通过AJAX请求获取的值来填充
        this.username = "";
        this.photo = "";

        // 创建一个div元素作为设置界面的容器，并为其添加类名"ac-game-settings"
        // 这个容器将包含登录和注册表单
        this.$settings = $(`
            <!-- 游戏设置区域 -->
            <div class="ac-game-settings">
                <!-- 登录区域 -->
                <div class="ac-game-settings-login">
                    <!-- 登录标题 -->
                    <div class="ac-game-settings-title">
                        登录
                    </div>
                    <!-- 用户名输入框 -->
                    <div class="ac-game-settings-username">
                        <div class="ac-game-settings-item">
                            <input type="text" placeholder="用户名">
                        </div>
                    </div>
                    <!-- 密码输入框 -->
                    <div class="ac-game-settings-password">
                        <div class="ac-game-settings-item">
                            <input type="password" placeholder="密码">
                        </div>
                    </div>
                    <!-- 提交按钮 -->
                    <div class="ac-game-settings-submit">
                        <div class="ac-game-settings-item">
                            <button>登录</button>
                        </div>
                    </div>
                    <!-- 错误信息展示区域 -->
                    <div class="ac-game-settings-error-message">
                    </div>
                    <!-- 注册选项 -->
                    <div class="ac-game-settings-option">
                        注册
                    </div>
                    <br>
                    <!-- QQ一键登录区域 -->
                    <div class="ac-game-settings-acwing">
                        <img width="30" src="https://www.liuzihao.icu/static/image/settings/logo.png">
                        <br>
                        <div>
                            QQ一键登录
                        </div>
                    </div>
                </div>
                <!-- 注册区域 -->
                <div class="ac-game-settings-register">
                    <!-- 注册标题 -->
                    <div class="ac-game-settings-title">
                        注册
                    </div>
                    <!-- 用户名输入框 -->
                    <div class="ac-game-settings-username">
                        <div class="ac-game-settings-item">
                            <input type="text" placeholder="用户名">
                        </div>
                    </div>
                    <!-- 密码输入框（第一次） -->
                    <div class="ac-game-settings-password ac-game-settings-password-first">
                        <div class="ac-game-settings-item">
                            <input type="password" placeholder="密码">
                        </div>
                    </div>
                    <!-- 密码输入框（第二次） -->
                    <div class="ac-game-settings-password ac-game-settings-password-second">
                        <div class="ac-game-settings-item">
                            <input type="password" placeholder="确认密码">
                        </div>
                    </div>
                    <!-- 提交按钮 -->
                    <div class="ac-game-settings-submit">
                        <div class="ac-game-settings-item">
                            <button>注册</button>
                        </div>
                    </div>
                    <!-- 错误信息展示区域 -->
                    <div class="ac-game-settings-error-message">
                    </div>
                    <!-- 登录选项 -->
                    <div class="ac-game-settings-option">
                        登录
                    </div>
                    <br>
                    <!-- QQ一键登录区域 -->
                    <div class="ac-game-settings-acwing">
                        <img width="30" src="https://www.liuzihao.icu/static/image/settings/logo.png">
                        <br>
                        <div>
                            QQ一键登录
                        </div>
                    </div>
                </div>
            </div>
        `);

        // 获取登录表单的各个元素
        this.$login = this.$settings.find(".ac-game-settings-login");
        this.$login_username = this.$login.find(".ac-game-settings-username input");
        this.$login_password = this.$login.find(".ac-game-settings-password input");
        this.$login_submit = this.$login.find(".ac-game-settings-submit button");
        this.$login_error_message = this.$login.find(".ac-game-settings-error-message");
        this.$login_register = this.$login.find(".ac-game-settings-option");

        // 默认隐藏登录表单
        this.$login.hide();

        // 获取注册表单的各个元素
        this.$register = this.$settings.find(".ac-game-settings-register");
        this.$register_username = this.$register.find(".ac-game-settings-username input");
        this.$register_password = this.$register.find(".ac-game-settings-password-first input");
        this.$register_password_confirm = this.$register.find(".ac-game-settings-password-second input");
        this.$register_submit = this.$register.find(".ac-game-settings-submit button");
        this.$register_error_message = this.$register.find(".ac-game-settings-error-message");
        this.$register_login = this.$register.find(".ac-game-settings-option");

        // 默认隐藏注册表单
        this.$register.hide();


        // 将设置界面容器添加到应用程序的某个指定位置
        this.root.$ac_game.append(this.$settings);

        // 调用start方法开始初始化过程
        this.start();
    }

    // start方法，该方法用于启动设置类的初始化流程
    start() {
        // 调用getinfo方法，该方法用于获取设置信息
        this.getinfo();
        // 调用add_listening_events方法，该方法用于添加监听事件
        this.add_listening_events();
    }

    // add_listening_events方法，该方法用于添加登录和注册相关的监听事件
    add_listening_events() {
        // 调用add_listening_events_login方法，该方法用于添加登录按钮的监听事件
        this.add_listening_events_login();
        // 调用add_listening_events_register方法，该方法用于添加注册按钮的监听事件
        this.add_listening_events_register();
    }

    // add_listening_events_login方法，该方法用于为登录按钮添加点击事件监听
    add_listening_events_login() {
        // 使用let关键字声明一个局部变量outer，并将其指向当前对象（this），用于在回调函数内部访问当前对象
        let outer = this;

        // 为登录/注册切换按钮（假设$login_register是登录/注册切换按钮的jQuery对象）添加点击事件监听
        // 当按钮被点击时，调用当前对象的register方法（这里可能存在逻辑错误，因为按钮名暗示是登录/注册切换，但回调却调用了register方法）
        this.$login_register.click(function () {
            outer.register(); // 注意：这里可能需要根据实际需求调整，如果按钮用于切换登录/注册视图，则不应直接调用register方法
        });

        // 为登录提交按钮（假设$login_submit是通过某种方式获取的登录提交按钮的jQuery对象）
        // 添加点击事件监听器。
        // 当用户点击这个按钮时，会触发回调函数，执行远程登录操作。
        this.$login_submit.click(function () {
            outer.login_on_remote(); // 调用当前对象的login_on_remote方法进行远程登录。
        });
    }

    // add_listening_events_register方法，该方法用于为注册按钮添加点击事件监听
    add_listening_events_register() {
        // 使用let关键字声明一个局部变量outer，并将其指向当前对象（this），用于在回调函数内部访问当前对象
        let outer = this;

        // 为注册/登录切换按钮（假设$register_login是注册/登录切换按钮的jQuery对象）添加点击事件监听
        // 当按钮被点击时，调用当前对象的login方法（这里同样可能存在逻辑错误，因为按钮名暗示是注册/登录切换，但回调却调用了login方法）
        this.$register_login.click(function () {
            outer.login(); // 注意：这里可能需要根据实际需求调整，如果按钮用于切换登录/注册视图，则不应直接调用login方法
        });

        // 当用户点击这个按钮时，会触发回调函数，执行远程注册操作。
        this.$register_submit.click(function () {
            outer.register_on_remote();// 调用当前对象的register_on_remote方法进行远程注册。
        });
    }

    // login_on_remote方法，用于在远程服务器上执行登录操作
    login_on_remote() {
        // 使用let关键字声明一个局部变量outer，并将其指向当前对象（this），以便在回调函数内部访问当前对象的成员
        let outer = this;

        // 从登录表单的用户名输入框（假设$login_username是对应的jQuery对象）中获取用户名
        let username = this.$login_username.val();

        // 从登录表单的密码输入框（假设$login_password是对应的jQuery对象）中获取密码
        let password = this.$login_password.val();

        // 清空登录错误信息的显示区域（假设$login_error_message是对应的jQuery对象）
        this.$login_error_message.empty();

        // 使用jQuery的$.ajax方法发起异步的HTTP请求
        $.ajax({
            // 请求的URL地址，这里假设是远程服务器的登录接口
            url: "https://www.liuzihao.icu/settings/login/",

            // 请求的类型，这里使用GET方法（注意：通常登录接口应该使用POST方法，因为GET方法会将用户名和密码暴露在URL中）
            type: "GET",

            // 发送到服务器的数据，这里包含了用户名和密码
            data: {
                username: username,
                password: password,
            },

            // 请求成功时的回调函数
            success: function (resp) {
                // 根据服务器的响应结果判断登录是否成功
                if (resp.result === "success") {
                    // 如果登录成功，则刷新当前页面
                    location.reload();
                } else {
                    // 如果登录失败，则在登录错误信息的显示区域显示错误信息
                    outer.$login_error_message.html(resp.result);
                }
            }
        });
    }

    // register_on_remote 方法，用于在远程服务器上执行用户注册操作
    register_on_remote() {
        // 定义一个变量 outer 来引用当前对象的上下文（this），以便在回调函数中访问
        let outer = this;

        // 从注册表单的输入字段中获取用户名
        let username = this.$register_username.val();

        // 从注册表单的输入字段中获取密码
        let password = this.$register_password.val();

        // 从注册表单的输入字段中获取密码确认项
        let password_confirm = this.$register_password_confirm.val();

        // 清空之前可能存在的错误信息
        this.$register_error_message.empty();

        // 使用 jQuery 的 $.ajax 方法发起一个异步的 HTTP 请求
        $.ajax({
            // 请求的 URL，指向远程服务器的注册接口
            url: "https://www.liuzihao.icu/settings/register/",

            // 请求的类型，这里使用的是 "GET" 方法
            // 注意：在实际应用中，注册操作通常涉及敏感信息（如密码），因此推荐使用 "POST" 方法
            type: "GET",

            // 要发送到服务器的数据，这里包含了用户名、密码和密码确认项
            // 由于是 "GET" 请求，这些数据会附加在 URL 的查询字符串中
            // 这在安全性上是不推荐的，因为 "GET" 请求的参数会暴露在 URL 中
            data: {
                username: username,
                password: password,
                password_confirm: password_confirm,
            },

            // 当请求成功时执行的回调函数
            // resp 参数包含了服务器返回的响应数据
            success: function (resp) {
                // 检查服务器返回的响应结果是否为 "success"
                if (resp.result === "success") {
                    // 如果是，则执行页面重载操作，以刷新当前页面并显示登录后的状态
                    location.reload();
                } else {
                    // 如果不是，则显示错误信息
                    // 使用之前定义的 outer 变量来访问当前对象的上下文，并更新错误信息提示区域的内容
                    outer.$register_error_message.html(resp.result);
                }
            }
        });
    }

    // logout_on_remote 方法，用于在远程服务器上执行登出操作
    logout_on_remote() {
        // 检查当前平台是否为 "ACAPP"，如果是，则直接返回 false，不执行后续操作
        // 这可能是基于某些业务逻辑或安全考虑，特定平台不允许通过此方法登出
        if (this.platform === "ACAPP") return false;

        // 使用 jQuery 的 $.ajax 方法发起一个异步的 HTTP 请求
        $.ajax({
            // 请求的 URL，这里指向一个远程服务器的登出接口
            url: "https://www.liuzihao.icu/settings/logout/",

            // 请求的类型，这里使用的是 "GET" 方法
            // 注意：在实际应用中，登出操作通常涉及敏感信息，建议使用 "POST" 方法
            // 并确保请求通过 HTTPS 发送，以保护用户数据的安全
            type: "GET",

            // 当请求成功时执行的回调函数
            // resp 参数包含了服务器返回的响应数据
            success: function (resp) {
                // 检查服务器返回的响应结果是否为 "success"
                // 如果是，则执行页面重载操作，以刷新当前页面
                // 这通常是为了清除页面上的用户信息，并显示登出后的状态
                if (resp.result === "success") {
                    location.reload();
                }
            }
        });
    }

    // register方法，用于打开注册界面
    register() {
        this.$login.hide();
        this.$register.show();
    }

    // login方法，用于打开登录界面
    login() {
        this.$register.hide();
        this.$login.show();
    }

    // getinfo方法，用于通过AJAX请求获取设置信息
    getinfo() {
        // 定义一个变量outer指向当前实例，以便在回调函数中访问
        let outer = this;

        // 使用jQuery的ajax方法发送GET请求
        $.ajax({
            // 请求的URL
            url: "https://www.liuzihao.icu/settings/getinfo/",
            // 请求类型
            type: "GET",
            // 发送的数据，包含当前平台信息
            data: {
                platform: outer.platform,
            },
            // 请求成功时的回调函数
            // 这个函数会在AJAX请求成功并且服务器返回响应时被调用
            success: function (resp) {
                // 根据响应结果执行不同操作
                // 如果响应结果为"success"，则更新用户名和照片变量，并调用其他方法处理后续逻辑
                if (resp.result === "success") {
                    outer.username = resp.username;
                    outer.photo = resp.photo;

                    // 如果响应结果为成功，则隐藏当前设置界面，并显示菜单
                    // 这里调用了hide和root.menu.show方法，但这两个方法在当前类中还没有具体实现
                    outer.hide();
                    outer.root.menu.show();
                } else {
                    // 如果响应结果不为成功，则打开登录界面
                    outer.login();
                }
            }
        });
    }

    // hide方法，通过调用jQuery的hide方法来隐藏$settings元素。用于隐藏设置界面
    hide() {
        this.$settings.hide();
    }

    // show方法，通过调用jQuery的show方法来显示$settings元素。用于显示设置界面
    show() {
        this.$settings.show();
    }
}
